<template>
  <el-form
    ref="form"
    :model="form"
    label-width="80px"
  >
    <el-form-item
      label="name"
      prop="name"
      :rules="[{ required: true, message: 'name不能为空', trigger: 'blur' }]"
    >
      <el-input
        v-model="form.name"
        placeholder="输入页面名称"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="src"
      prop="src"
      :rules="[{ required: true, message: 'src不能为空', trigger: 'blur' }]"
    >
      <el-input
        v-model="form.src"
        placeholder="输入页面路径"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        @click="addRouter"
      >立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'addRoutes',
  data () {
    return {
      form: {
        id: 0,
        src: '',
        name: ''
      }
    }
  },
  methods: {
    addRouter () {
      if (!this.form.name) {
        this.$message.error('name不能为空')
        return 0
      }
      if (!this.form.src) {
        this.$message.error('src不能为空')
        return 0
      }
      var route = {
        src: this.form.src,
        name: this.form.name,
        id: new Date().getTime()
      }
      let that = this
      this.$http.post('/routers/addRouters', route).then(function (res) {
        that.$message({
          message: '删除成功!',
          type: 'success'
        })
        that.$router.push({ name: 'home' })
      })
    }
  }
}
</script>
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
